import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
// 导入新版redux
import store, { add, sub, asyncAddAction } from '../../store'

function ReduxUpdate(props) {

    let [num, setNum] = useState();

    useEffect(() => {
        store.subscribe(() => {
            setNum(store.getState().value);
        })
    }, [num])

    return (
        <div style={{ width: 400, height: 400, margin: '100px auto', border: '1px solid red' }}>
            <p>数值：{store.getState().value}</p>
            <button onClick={() => {
                store.dispatch(add(5))
            }} style={{ margin: '100px 50px' }}>+5</button>
            <button onClick={() => {
                store.dispatch(sub(4))
            }}>-4</button>
            <button onClick={() => {
                store.dispatch(asyncAddAction(10))
            }}>异步+10</button>
        </div>
    );
}

export default ReduxUpdate;